<template>
  <div id="codeEditor" ref="codeEditor"></div>
</template>

<script>
// import * as monaco from 'monaco-editor';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
export default {
  name: 'codeEditor',
  props: {
    value: '',
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      editor: null,
      defaultConfig: {
        value: '',
        language: 'javascript',
        automaticLayout: true, // 自适应布局
        theme: 'vs-dark',
        foldingStrategy: 'indentation',
        renderLineHighlight: 'all', // 行亮
        selectOnLineNumbers: true, // 显示行号
        minimap: {
          enabled: false
        },
        readOnly: false, // 只读
        fontSize: 16, // 字体大小
        scrollBeyondLastLine: false, // 取消代码后面一大段空白
        overviewRulerBorder: false // 不要滚动条的边框
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.defaultConfig.value = this.value
      this.editor = monaco.editor.create(this.$refs.codeEditor, Object.assign(this.defaultConfig, this.config))
      this.editor.onDidChangeModelContent(() => {
        this.$emit('input', this.editor.getValue())
      })
    },
    setValue(value) {
      this.editor.setValue(value)
      this.$nextTick(() => {
        console.log(this.editor, 'this.editor')
      })
    }
  },
  watch: {
    'config.language': {
      deep: true,
      handler(val) {
        monaco.editor.setModelLanguage(this.editor.getModel(), val)
      }
    }
  }
}
</script>

<style scoped lang="less">
#codeEditor {
  width: 100%;
  height: 100%;
}
</style>
